<template>
	<coreshop-page title="代理订单" mode="left">
		<view class="content-box">
			<view class="content">
				<view class="header">
					<view class="team">
						<view class="order">
							<view class="team_order">
								<view class="label">团队订单数量(单)</view>
								<view class="value">{{state.orderInfo?.allOrder ? state.orderInfo?.allOrder :  0}}
								</view>
							</view>
							<view class="order_level">
								<view>
									<view class="label">代购订单</view>
									<view class="value">
										{{state.orderInfo?.procurementServiceOrder ? state.orderInfo?.procurementServiceOrder :  0}}
									</view>
								</view>
								<view>
									<view class="label">客户订单</view>
									<view class="value">
										{{state.orderInfo?.customerOrder ? state.orderInfo?.customerOrder :  0}}</view>
								</view>
							</view>
						</view>
						<view class="order_price">
							<view class="team_price">
								<view class="label">总订单金额（元）</view>
								<view class="value">
									{{state.orderInfo?.allOrderMoney ? state.orderInfo?.allOrderMoney :  0}}</view>
							</view>
							<view class="order_level">
								<view>
									<view class="label">代购订单</view>
									<view class="value">
										{{state.orderInfo?.procurementServiceOrderMoney ? state.orderInfo?.procurementServiceOrderMoney :  0}}
									</view>
								</view>
								<view>
									<view class="label">客户订单</view>
									<view class="value">
										{{state.orderInfo?.customerOrderMoney ? state.orderInfo?.customerOrderMoney :  0}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="statistics">
						<view class="statistics_order">
							<view class="label">本月订单总数（单）</view>
							<view class="value">{{state.orderInfo?.monthOrder ? state.orderInfo?.monthOrder :  0}}
							</view>
						</view>
						<view class="statistics_price">
							<view class="label">本月订单金额（元）</view>
							<view class="value">
								{{state.orderInfo?.monthOrderMoney ? state.orderInfo?.monthOrderMoney :  0}}</view>
						</view>
					</view>
				</view>
				<view class="tabs">
					<uv-tabs :list="state.orderStatus" @change="handleChangeTabs" lineWidth="30" lineColor="#f56c6c"
						:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
			    	}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="height: 34px;flex:1;min-width:100rpx"></uv-tabs>
				</view>
			</view>
			<view class="list" v-if="state.list.length > 0">
				<view class="item" v-for="item in state.list" :key="item.id">
					<view class="order-num-status">
						<view class="num">订单编号：{{item.orderId}}</view>
						<view class="status">{{item.userId==item.buyUserId?'代购订单':'推广订单'}}</view>
					</view>
					<view class="order-peo">
						<view class="peo-box">
							<text class="tit">下单人：</text>
							<image class="img" :src="item.buyUserAvatar"></image>
							<text class="name">{{item.buyUserNickName}}</text>
						</view>
						<view class="time-box">
							{{timeFormat(item.createTime,'yyyy.mm.dd hh:MM')}}
						</view>
					</view>
					<view class="goods-box">
						<view class="goods" v-for="goods in item.agentOrderDetails" :key="goods.id">
							<image class="img" :src="goods.imageUrl"></image>
							<view class="goods-msg">
								<view class="name">{{goods.name}}</view>
								<view class="addon">{{goods.addon}}</view>
								<view class="price-box">
									<view>价格：￥{{goods.productPrice}}</view>
									<view>数量：{{goods.productNums}}</view>
									<view>佣金：￥<text class="red">{{goods.amount}}</text></view>
								</view>
							</view>
						</view>
					</view>
					<view class="total-box">
						<view class="tit">商品总价：￥{{ item.goodsAmount }}</view>
						<view class="desc">实付款：￥{{ item.payedAmount }}</view>
					</view>
					<view class="discount-box">
						<view class="tit">优惠金额：￥{{ Math.round(item.goodsAmount-item.payedAmount).toFixed(2) }}</view>
						<view class="desc">提成：￥{{ item.amount || 0 }} <text
								class="m-l-20">{{item.isSettlement==1?'已结算':item.isSettlement==2?'未结算':'已退款'}}</text>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="!state.hasData">没有更多了</view>
			</view>
			<view v-else class="list">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
			</view>
		</view>

	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { queryAgentOrderSum, queryAgentMyOrder } from '@/core/api';
	import type { Response } from '@/core/models';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { EmptyEnum } from '@/core/enum';

	const state = reactive<{
		orderStatus : Array<{ name : string, id : number }>;
		orderInfo : any;
		page : number;
		list : Array<any>;
		hasData : boolean;
		tabId : number;
		limit : number;
	}>({
		orderStatus: [
			{
				id: 0,
				name: '全部'
			},
			{
				id: 1,
				name: '已结算'
			},
			{
				id: 2,
				name: '未结算'
			},
			{
				id: 3,
				name: '已退款'
			},
		],
		tabId: 0,
		orderInfo: {},
		page: 1,
		list: [],
		hasData: true,
		limit: 10,
	});

	onLoad(() => {
		getAgentOrderSum();
		getAgentMyOrder();
	})

	onReachBottom(() => {
		if (state.hasData) {
			state.page++;
			getAgentMyOrder();
		}
	});

	/** 获取分销订单统计 */
	const getAgentOrderSum = async () => {
		const orderSum : Response<any> = await queryAgentOrderSum();
		if (orderSum.status) {
			state.orderInfo = orderSum.data;
		}
	}

	/** 我的分销订单 */
	const getAgentMyOrder = async () => {
		const order : Response<any> = await queryAgentMyOrder({
			page: state.page,
			limit: state.limit,
			id: state.tabId
		});
		if (order.status) {
			state.list = state.list.concat(order.data);
			if (order.data.length < state.limit) {
				state.hasData = false;
			}
		}
	}

	/** 切换tabs */
	const handleChangeTabs = (e : any) => {
		state.tabId = e.id;
		state.page = 1;
		state.hasData = true;
		state.list = [];
		getAgentMyOrder();
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>